<template>
  <page-header-wrapper :title="false">
    <el-card class="box-card">
      <el-form slot="header" :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="queryParam.name" clearable placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParam.status" clearable placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="handleReset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column label="角色名称" prop="name" align="center" />
        <el-table-column label="角色编码" prop="roleCode" align="center" />
        <el-table-column label="角色描述" prop="description" align="center" />
        
        <el-table-column label="内置角色" width="180" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.isBuiltin) === 0">否</el-tag>
            <el-tag v-if="parseInt(scope.row.isBuiltin) === 1" type="danger">是</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="状态" width="180" align="center">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.status) === 1">正常</el-tag>
            <el-tag v-if="parseInt(scope.row.status) === 2" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right" align="center"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="handleEdit(scope.row)">编辑
            </el-link>
            <el-link
              :underline="false"
              style="margin-left:10px;"
              type="danger" v-if="scope.row.id !== '1' && scope.row.isBuiltin === 0"
              @click="handleDelete(scope.row)">删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination
          :current-page="queryParam.page"
          :page-size="queryParam.limit"
          :page-sizes="[10, 20, 30, 40]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
    <role-modal ref="modal" @ok="handleOk"></role-modal>
  </page-header-wrapper>
</template>

<script>
import RoleModal from './modules/role-form'
import { roleAdd, roleDelete, roleList, roleUpdate } from '@/api/role'

export default {
  name: 'TableList',
  components: {
    RoleModal
  },
  data () {
    return {
      description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
      total: 0,
      visible: false,
      tableData: [],
      form: null,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      pageNum: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    handleSizeChange (val) {
      this.queryParam.limit = val
      this.getTable()
    },
    handleCurrentChange (val) {
      this.queryParam.page = val
      this.getTable()
    },
    loadData () {
      roleList(this.queryParam).then(res => {
        this.tableData = res.data.records
        this.total = parseInt(res.data.total)
      })
    },
    handleSearch () {
      this.queryParam.page = 1
      this.loadData()
    },
    handleReset () {
      this.queryParam = {
        page: 1,
        limit: 10
      }
      this.loadData()
    },
    handleAdd () {
      this.$refs.modal.visible = true
      this.$refs.modal.mdl = {}
    },
    handleEdit (record) {
      this.$refs.modal.visible = true
      this.$refs.modal.mdl = { ...record }
    },
    handleOk () {
      const form = this.$refs.modal.form
      form.validateFields((errors, values) => {
        if (!errors) {
          values.permissions = this.$refs.modal.mdl.permissions
          if (values.depts && values.depts.length) {
            values.depts = values.depts.map(v => v.value)
          }
          if (values.id) {
            roleUpdate(values).then(res => {
              this.$refs.modal.visible = false
              this.$message.success('编辑成功')
              // 新增/修改 成功时，重载列表
              this.queryParam.page = 1
              this.loadData()
            }).catch(() => {})
          } else {
            roleAdd(values).then(res => {
              this.$refs.modal.visible = false
              this.$message.success('新增成功')
              // 新增/修改 成功时，重载列表
              this.queryParam.page = 1
              this.loadData()
            }).catch(() => {})
          }
        }
      })
    },
    handleDelete (record) {
      this.$confirm(`您确定要删除该角色吗？`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        roleDelete({ id: record.id }).then(res => {
          this.$message.success('已删除')
          // 新增/修改 成功时，重载列表
          this.queryParam.page = 1
          this.loadData()
        }).catch(() => {})
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style scoped>
.table-operate {
  margin-bottom: 20px;
}
</style>
